<template>
  <el-form ref="dataForm"
           :model="dataForm"
           :rules="mDataRule"
           :inline="inline"
           :label-position="labelPosition"
           :label-width="labelWidth"
           @keyup.enter.native="submitFunc()"
           @submit.native.prevent
  >
    <!--           @keyup.enter.native="submitFunc()"-->
    <el-row :gutter="24">
    <!--  显示所有内容  -->
    <template  v-if="colFlagFunc" v-for="(key, index) in Object.keys(config)">
      <!--  根据”showAttrs“的内容对需要显示的内容进行过滤  -->
        <el-col :span="12"  v-if="config[key].type!=='table'">
          <normal-item ref="components"
                       :isShow="checkIsShow(key) && (showAll || (!showAll && (index < showNumber || showMoreSearch)))"
                       :dataForm="dataForm"
                       :showLabel="showLabel"
                       :config="config[key]"
                       :attrName="key"
                       :key="key">

          </normal-item>
        </el-col>

      <el-col :span="23"  v-else>
        <normal-item ref="components"
                     :isShow="checkIsShow(key) && (showAll || (!showAll && (index < showNumber || showMoreSearch)))"
                     :dataForm="dataForm"
                     :showLabel="showLabel"
                     :config="config[key]"
                     :attrName="key"
                     :key="key">

        </normal-item>
      </el-col>

    </template>
    </el-row>
    <template  v-if="!colFlagFunc" v-for="(key, index) in Object.keys(config)">
      <!--  根据”showAttrs“的内容对需要显示的内容进行过滤  -->
        <normal-item ref="components"
                     :isShow="checkIsShow(key) && (showAll || (!showAll && (index < showNumber || showMoreSearch)))"
                     :dataForm="dataForm"
                     :showLabel="showLabel"
                     :config="config[key]"
                     :attrName="key"
                     :key="key">
        </normal-item>
    </template>
    <!--  按钮组  -->
    <el-form-item ref="buttonGroup">
      <template v-if="searchBtn">
        <el-button v-if="Object.keys(config).length > 0" @click="submitFunc()" type="primary" size="small"
                   icon="el-icon-search">
          查询
        </el-button>
      </template>
      <!--  按钮插槽  -->
      <slot name="button"></slot>
      <!--  当showAll为”falsy“并”需要显示的行数超过3“时，显示”更多查询项“按钮  -->
      <el-button size="small" type="text" v-if="!showAll && Object.keys(config).length > showNumber"
                 @click="showMoreSearchHandler">
        {{ showMoreSearch ? '隐藏' : '显示' }}更多查询项
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import normalItem from './item'

export default {
  name: 'normalForm',
  components: {normalItem},
  watch: {
    config: {
      /**
       * 自动计算标签的宽度
       */
      handler() {
        const func = item => this.R.length(this.R.propOr('', 'label', item))
        const maxLengthLabel = this.R.reduce(this.R.maxBy(func), {label: ''}, this.R.values(this.config))
        const labelWidth = this.R.length(maxLengthLabel.label) * 22

        this.labelWidth = `${labelWidth < 50 ? 50 : labelWidth}px`
      },
      deep: true,
      immediately: true
    }
  },
  computed: {
    /**
     * 根据需要显示的属性，挑选出需要的”验证规则“
     */
    mDataRule() {
      if (this.R.length(this.showAttrs) > 0) {
        return this.R.pick(this.showAttrs, this.dataRule)
      }
      return this.dataRule
    }
  },
  props: {
    pCheckIsShow: {
      type: Function,
      default: () => true
    },
    pCheckColRightIsShow: {
      type: Function,
      default: () => true
    },
    /**
     * 是否显示所有
     */
    showAll: {
      default: false
    },
    /**
     * 显示的数量
     */
    showNumber: {
      default: 5
    },
    /**
     * 需要显示的属性名称集合
     */
    showAttrs: {
      default: () => []
    },
    /**
     * 是否需要显示搜索按钮
     */
    searchBtn: {
      default: false
    },
    /**
     * 是否需要显示标签
     */
    showLabel: {
      default: false
    },
    /**
     * 是否在一行显示
     */
    inline: {
      default: false
    },
    /**
     * 数据表单
     */
    dataForm: {
      default: () => ({})
    },
    /**
     * 数据配置
     */
    config: {
      default: () => ({})
    },
    /**
     * 数据验证规则
     */
    dataRule: {
      default: () => ({})
    },
    /**
     * 触发提交时的方法
     */
    submitFunc: {
      type: Function,
      default: () => {
      }
    },
    colFlagFunc: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showMoreSearch: false,
      labelPosition: 'right',
      labelWidth: '120px'
    }
  },
  methods: {
    showMoreSearchHandler() {
      this.showMoreSearch = !this.showMoreSearch
      this.$nextTick(() => {
        let componentsWidth = '160px'
        const setWidth = (vm) => {
          const dom = vm.$el.children[0].children[0]

          if (this.showMoreSearch) {
            componentsWidth = '130px'
            if (dom.classList.contains('el-range-editor')) {
              componentsWidth = '340px'
            }
          }
          dom.style.width = componentsWidth
        }

        this.$refs.components.forEach(setWidth, this.$refs.components)
      })
    },
    /**
     * 根据”showAttrs“验证是否显示
     * @param key 属性名称
     * @returns {boolean|*}
     */
    checkIsShow(key) {
      if (this.R.length(this.showAttrs) > 0 && !this.R.includes(key, this.showAttrs)) {
        return false
      }
      return this.pCheckIsShow(key) === true
    },
    /**
     * 当触发”submit“之前执行的函数
     */
    execBeforeSubmitFunc() {
      const execBeforeSubmitFunc = (item) => {
        const func = this.R.prop('beforeSubmit', item)

        if (this.R.isNil(func) || !(func instanceof Function)) {
          return
        }
        func()
      }
      this.R.forEach(execBeforeSubmitFunc, this.R.reject(this.R.isNil, this.R.map(this.R.path(['$refs', 'component']), this.$refs['components'])))
    },
    /**
     * 当数据加载完毕后执行的函数
     */
    execDataLoaded() {
      const execDataLoaded = (item) => {
        const func = this.R.prop('dataLoaded', item)

        if (this.R.isNil(func) || !(func instanceof Function)) {
          return
        }
        func()
      }

      this.$nextTick(() => {
        this.R.forEach(execDataLoaded, this.R.reject(this.R.isNil, this.R.map(this.R.path(['$refs', 'component']), this.$refs['components'])))
      })
    },
    /**
     * 清除验证
     */
    clearValidate() {
      this.$refs['dataForm'].clearValidate()
    },
    /**
     * 重置内容
     */
    resetFields() {
      this.$refs['dataForm'].resetFields()
    },
    /**
     * 验证内容
     * @param cb 验证成功后的回调函数
     */
    validate(cb) {
      this.$refs['dataForm'].validate(valid => cb(valid))
    }
  }
}
</script>

<style scoped>

</style>
